<link rel="stylesheet" href="/static/common/css/page.css">
<script src="/static/common/js/users-list.js" type="text/javascript"></script>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<section id="table" class="content">
    <div class="row">
        <div class="col-xs-12">
            <div class="nav-tabs-custom">
                <ul class="nav nav-tabs pull-right">
                    <!--<li><a href="#tab-content-edit" data-toggle="tab" id="nav-tab-edit"><i class="fa fa-edit"></i></a>
                    </li>-->
                    <li class="active"><a href="#tab-content-list" data-toggle="tab" id="nav-tab-list"><i
                            class="fa fa-list-ul"></i></a></li>
                    <li class="pull-left header"><i class="fa fa-bars"></i>
                        <small>用户列表</small>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="tab-pane active" id="tab-content-list">
                        <div class="box">
                            <!-- /.box-header -->
                            <div class="dataTables_filter" id="searchDiv">
                                <div class="btn-group pull-left">
                                    <span>账户:</span>
                                    <input type="text" size="20" placeholder="输入用户账号" id="search_name" th:value="${searchName}">
                                </div>
                                <div class="pull-left" style="width: 2%">&nbsp;</div>
                                <div class="btn-group pull-left">
                                    <span>手机号:</span>
                                    <input type="text" size="20" placeholder="输入手机号" id="search_phone" th:value="${searchPhone}">
                                </div>
                                <div class="btn-group pull-right">
                                    <button type="button" class="btn btn-info" id="users_query_click">
                                        <i class="fa fa-search"></i>查询
                                    </button>
                                    <button type="button" class="btn btn-default" id="users_reset_click">
                                        <i class="fa fa-refresh"></i>重置
                                    </button>
                                    <!--<button class="btn btn-primary" id="sms_export">
                                        <i class="fa fa-clipboard"></i>导出
                                    </button>-->
                                </div>
                            </div>
                            <div class="box-body">
                                <div id="data-table_wrapper"
                                     class="dataTables_wrapper form-inline dt-bootstrap no-footer">
                                    <div id="data-table_processing" class="dataTables_processing"
                                         style="display: none;">处理中...
                                    </div>
                                    <table id="data-table"
                                           class="table table-bordered table-striped table-hover dataTable no-footer responsive dtr-inline collapsed"
                                           style="width: 100%;" role="grid" aria-describedby="data-table_info">
                                        <thead>
                                        <tr role="row">
                                            <th class="text-center sorting_disabled" rowspan="1" colspan="1"
                                                style="width: 5%;" aria-label="序号">序号
                                            </th>
                                            <th class="sorting_disabled text-center" rowspan="1" colspan="1"
                                                style="width: 10%;" aria-label="用户名">用户名
                                            </th>
                                            <th class="sorting_disabled text-center" rowspan="1" colspan="1"
                                                style="width: 10%;" aria-label="短信余额">短信余额
                                            </th>
                                            <th class="sorting_disabled text-center" rowspan="1" colspan="1"
                                                style="width: 20%;" aria-label="短信通道">短信通道
                                            </th>
                                            <th class="sorting_disabled text-center" rowspan="1" colspan="1"
                                                style="width: 10%;" aria-label="号码前缀">号码前缀
                                            </th>
                                            <th class="sorting_disabled text-center" rowspan="1" colspan="1"
                                                style="width: 15%;" aria-label="内容随机值">内容随机值
                                            </th>
                                            <th class="sorting_disabled text-center" rowspan="1" colspan="1"
                                                style="width: 15%;" aria-label="创建时间">创建时间
                                            </th>
                                            <th class="sorting_disabled text-center" rowspan="1" colspan="1"
                                                style="width: 15%;" aria-label="操作">操作
                                            </th>
                                        </tr>
                                        </thead>
                                        <tbody>
                                        <tr class="odd" th:if="${page.records != null && page.records.size()>0}"
                                            th:each="user:${page.records}">
                                            <td class="text-center sorting_disabled" rowspan="1" colspan="1"
                                                style="width: 5%;" th:text="${user.id}">
                                            </td>
                                            <td class="sorting_disabled text-center" rowspan="1" colspan="1"
                                                style="width: 10%;" th:text="${user.name}">
                                            </td>
                                            <td class="sorting_disabled text-center" rowspan="1" colspan="1"
                                                style="width: 10%;" th:text="${user.allowance}">
                                            </td>
                                            <td class="sorting_disabled text-center" rowspan="1" colspan="1"
                                                style="width: 20%;" th:text="${user.account != null ? user.account.code : ''}">
                                            </td>
                                            <td class="sorting_disabled text-center" rowspan="1" colspan="1"
                                                style="width: 10%;" th:text="${user.phonePrefix}">
                                            </td>
                                            <td class="sorting_disabled text-center" rowspan="1" colspan="1"
                                                style="width: 15%;" th:text="${user.textSuffix > 0 ? '启用' : '停用'}">
                                            </td>
                                            <td class="sorting_disabled text-center" rowspan="1" colspan="1"
                                                style="width: 15%;" th:text="${#dates.format(user.createTime,'yyyy-MM-dd HH:mm:ss')}">
                                            </td>
                                            <td class="sorting_disabled text-center" rowspan="1" colspan="1"
                                                style="width: 15%;">
                                                <button class="btn btn-link" th:onclick="modifyAllowanceModal([[${user}]])"><i class="fa fa-pencil-square-o" aria-hidden="true"></i></button>
                                                <button class="btn btn-link" th:onclick="delUser([[${user}]])"><i class="fa fa-trash-o" aria-hidden="true"></i></button>
                                            </td>
                                        </tr>
                                        <tr th:if="${page.records == null || page.records.size() < 1}">
                                            <td valign="top" colspan="9" class="dataTables_empty">未找到符合条件的数据</td>
                                        </tr>
                                        </tbody>
                                    </table>
                                    <input type="hidden" th:value="${page.current}" name="current">
                                    <input type="hidden" th:value="${page.pages}" name="pageCount">
                                    <div>共  <span th:text="${page.total}"></span>  条</div>
                                    <div class="information_page"></div>
                                </div>
                            </div>
                            <!-- /.box-body -->
                        </div>
                        <!-- /.box -->
                    </div>
                    <div>
                        <input value="2" id="list" type="text" style="display: none">
                        <input id="currentId" type="hidden" th:value="${currentId}">
                    </div>
                    <!-- /.tab-pane -->
                    <!--<div class="tab-pane" id="tab-content-edit">
                        <div class="box box-info">
                            <form class="form-horizontal" id="data-form" name="data-form">
                                <input type="hidden" name="id" id="id">
                                <div class="box-body">
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label" for="sign">签名<i>*</i></label>
                                            <div class="col-sm-4">
                                                <input class="form-control" type="text" name="sign" id="sign"
                                                       placeholder="签名" datatype="*1-20">
                                            </div>
                                            <div class="col-sm-6 g-mt-5"><span class="Validform_checktip"></span></div>
                                        </div>
                                    </div>
                                </div>
                                &lt;!&ndash; /.box-body &ndash;&gt;
                                <div class="box-footer text-center" style="height:50px;">
                                    &lt;!&ndash;以下两种方式提交验证,根据所需选择&ndash;&gt;
                                    <button class="btn btn-default" type="button" data-btn-type="cancel">取消</button>
                                    <button class="btn btn-primary" type="submit" data-btn-type="save">提交</button>
                                </div>
                                &lt;!&ndash; /.box-footer &ndash;&gt;
                            </form>
                        </div>
                        &lt;!&ndash; /.box &ndash;&gt;
                    </div>-->
                    <!-- /.tab-pane -->
                </div>
                <!-- /.tab-content -->
            </div>
            <!-- nav-tabs-task -->
        </div>
        <!-- /.col -->
    </div>
    <!-- /.row -->
</section>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">修改余额</h4>
            </div>
            <div class="modal-body">
                <input class="form-control" type="hidden" id="allowance_id">
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="allowance_name">账号<i></i></label>
                    <div>
                        <input class="form-control" type="text" id="allowance_name" disabled="disabled">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="allowance">短信余额<i></i></label>
                    <div>
                        <input class="form-control" type="text" id="allowance">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="add_allowance">加余额<i></i></label>
                    <div>
                        <input class="form-control" type="text" id="add_allowance">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="minus_allowance">减余额<i></i></label>
                    <div>
                        <input class="form-control" type="text" id="minus_allowance">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="account">短信通道<i></i></label>
                    <div>
                        <select class="form-control" id="account">
                            <option th:each="account:${accountList}" th:value="${account.id}" th:text="${account != null ? account.code : '请选择'}"></option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="prefix">号码前缀</label>
                    <div>
                        <input class="form-control" type="text" id="prefix" placeholder="号码前缀：默认为86">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-2 control-label" for="suffix">短信后缀随机值</label>
                    <div>
                        <select class="form-control" type="text" id="suffix">
                            <option value="0">停用</option>
                            <option value="1">启用</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal" id="manager_users_modal_close">关闭</button>
                <button type="button" class="btn btn-primary" onclick="modifyAllowance()">保存</button>
            </div>
        </div>
    </div>
</div>